<template>
  <li>
    <label>
      <!-- v-model:不建议使用，因为直接孙子修改爷爷的数据了 -->
      <!-- 表单元素常用事件:focus、blur、change -->
      <input type="checkbox" :checked="todoObj.done" @change="handler(todoObj.id)" ref="cur"/>
      <span>{{todoObj.title}}</span>
    </label>
    <!-- 按钮显示与隐藏:v-if|v-show|行内style -->
    <button class="btn btn-danger" v-show="todoObj.done" @click="deleteItem(todoObj.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "",
  props:['todoObj',"changeDone",'removeItem'],
  //子组件Item的方法
  methods:{
    //change是表单元素常见的事件之一:文本框->里面的文字发生变化就会出发
    //单选、复选:勾选状态发生变化的时候就会出发
    handler(id){
      //调用爷爷的方法:相应数据的id、告诉App组件当前Item的复选框的状态【真、假】
      //获取input的checked几种手段?两种：ref、event
      this.changeDone(id,this.$refs.cur.checked);
    },
    //Item组件的方法:deleteItem,当用户点击按钮的时候会调用下面的方法
    deleteItem(id){
      //调用App根组件的方法，通知App根组件进行删除相应id的数据
      this.removeItem(id);
    }
  }
};
</script>

<style scoped>
</style>
